<template>
	<view class="page-container">

		<!-- 首页顶部栏 -->
		<view class="global-header-bar">
			<!-- <view class="global-header-bar__select">选择城市<text class="icon iconfont">&#xe674;</text></view> -->
			<view class="global-header-bar__search" @click="jumpGlobalSearch">
				<text class="icon iconfont">&#xe686;</text>
				<text class="desc">{{uniHotSearchDefault}}</text>
			</view>
		</view>

		<!-- banner -->
		<view v-if="bannerList.length>0" class="banner">
			<swiper class="swiper" indicator-dots="true" indicator-color="rgba(255,255,255,.7)" duration="300" autoplay="true"
			 interval="5000" indicator-active-color="#fff">
				<block v-for="(item,index) in bannerList" :key="index">
					<swiper-item>
						<image @click="toAds(item)" :src="item.adsrc" mode="aspectFill"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>

		<!-- 首页导航栏开始 -->
		<swiper class="menu-swiper h214" v-if="sHeight == 1 && isSwitch == true" :indicator-dots="navdots" indicator-active-color="#2dbb55" indicator-color="#e5e5e5">
			<block v-for="(item,index) in navList" :key="index">
				<swiper-item class="menu-info clearfix">
					<block v-for="(item1,index1) in item" :key="index1">
						<view class="list-url" @click="toNavPage(item1)">
							<image class="item-pic" :src="item1.m_ico"></image>
							<view class="item-text">{{item1.m_title}}</view>
						</view>
					</block>
				</swiper-item>
			</block>
		</swiper>
			
		<swiper class="menu-swiper h380" v-if="sHeight == 2 && isSwitch == true" :indicator-dots="navdots" indicator-active-color="#2dbb55" indicator-color="#e5e5e5">
			<block v-for="(item,index) in navList" :key="index">
				<swiper-item class="menu-info clearfix">
					<block v-for="(item1,index1) in item" :key="index1">
						<view class="list-url" @click="toNavPage(item1)">
							<image class="item-pic" :src="item1.m_ico"></image>
							<view class="item-text">{{item1.m_title}}</view>
						</view>
					</block>
				</swiper-item>
			</block>
		</swiper>
		
		<swiper class="menu-swiper h416" v-if="sHeight == 3 && isSwitch == true" :indicator-dots="navdots" indicator-active-color="#2dbb55" indicator-color="#e5e5e5">
			<block v-for="(item,index) in navList" :key="index">
				<swiper-item class="menu-info clearfix">
					<block v-for="(item1,index1) in item" :key="index1">
						<view class="list-url" @click="toNavPage(item1)">
							<image class="item-pic" :src="item1.m_ico"></image>
							<view class="item-text">{{item1.m_title}}</view>
						</view>
					</block>
				</swiper-item>
			</block>
		</swiper>
		
		<view class="menu-container" v-for="(item,index) in navList" :key="index" v-if="isSwitch == false">
			<view class="menu-container__item" v-for="citem in item" :key="citem.id" @click="toNavPage(citem)">
				<image class="icon" :src="citem.m_ico" mode="aspectFill"></image>
				<view class="name">{{citem.m_title}}</view>
			</view>
		</view>

		<!-- 滚动订单信息 -->
		<view class="scroll-message" v-if="newMessage.length">
			<view class="scroll-message__hd">
				<text class="iconfont">&#xe707;</text>
			</view>
			<swiper class="scroll-message__bd" :vertical="true" :circular="true" :autoplay="true" :interval="3000" :duration="500">
				<block v-for="item in newMessage" :key="item.id">
					<swiper-item>
						<view class="scroll-message__bd__item">用户<text class="label">{{item.nickname}}</text>预订了{{item.title}}</view>
					</swiper-item>
				</block>
			</swiper>
		</view>

		<!-- 专题 -->
		<view class="module-container" v-if="hotSpecial.length">
			<view class="module-container__bar">
				<view class="tit">专题 · 优惠</view>
				<view class="sub"><text class="txt">精品专题推荐</text></view>
			</view>
			<swiper class="swiper-special__group" :indicator-dots="true" indicator-active-color="#2dbb55" indicator-color="#e5e5e5"
			 :interval="5000" :duration="300">
				<block v-for="item in hotSpecial" :key="item.id">
					<swiper-item>
						<view class="swiper-special__group__item" @click="toSpecial(item.id)">
							<image class="img" :src="item.litpic" mode="aspectFill"></image>
							<view class="title">{{item.title}}</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>

		<!-- 户外活动 -->
		<view class="module-container" v-if="outdoorMenu.length">
			<view class="hw-tab-bar">
				<block v-for="(item, index) in outdoorMenu" :key="item.id">
					<view :class="['item', currentMenu == index ? 'on' : '']" :data-index="index" @click="switchAttr($event, item.id)">{{item.attrname}}</view>
				</block>
			</view>
			<view class="hw-con-group" v-for="(item, index) in hotOutdoor" :key="item.id">
				<block v-for="citem in item.list" :key="citem.id" v-if="currentMenu == index">
					<view class="hw-con-group__item" @click="toDetail(114, citem.id)">
						<view class="hd">
							<text class="label c-green" v-if="citem.price">报名中</text>
							<!-- <text class="label c-orange" v-if="citem.status == 2">已成行</text>
							<text class="label c-red" v-if="citem.status == 3">已满员</text> -->
							<text class="label c-grey" v-else>已结束</text>
							<image class="img" :src="citem.litpic" mode="aspectFill"></image>
						</view>
						<view class="title">{{citem.title}}</view>
						<view class="info">
							<text class="label" v-if="citem.startDay">{{citem.startDay}}出发</text>
							<text class="label" v-if="citem.lineday">{{citem.lineday}}天</text>
						</view>
					</view>
				</block>
			</view>
			<view class="module-more-bar">
				<text class="module-more-bar__txt" @click="toProductIndex(114)">更多活动</text>
				<text class="module-more-bar__icon iconfont">&#xe68d;</text>
			</view>
		</view>

		<!-- 限时抢购 -->
		<view class="module-container" v-if="hotTuan.length">
			<view class="module-container__bar">
				<view class="tit">限时抢购</view>
				<view class="sub"><text class="txt">精选团购 优惠不停</text></view>
			</view>
			<block v-for="item in hotTuan" :key="item.id">
				<view class="hot-tuan-group" @click="toDetail(13, item.id)">
					<view class="hd">
						<view class="count-down">
							<text class="txt">距结束</text>
							<st-countdown style=" vertical-align: middle; margin-top: -18rpx;" :time="item.count_time" :now="now"></st-countdown>
						</view>
						<image class="img" :src="item.litpic" mode="aspectFill"></image>
					</view>
					<view class="title">{{item.title}}</view>
					<view class="info">
						<view class="price"><text class="jg">{{globalExchangeRate}}<text class="num">{{item.price}}</text></text>起</view>
						<view class="del" v-if="item.sellprice > 0">{{globalExchangeRate}}{{item.sellprice}}</view>
						<view class="btn">去抢购</view>
					</view>
				</view>
			</block>
			<view class="module-more-bar">
				<text class="module-more-bar__txt" @click="toProductIndex(13)">查看团购</text>
				<text class="module-more-bar__icon iconfont">&#xe68d;</text>
			</view>
		</view>

		<!-- 爆款线路 -->
		<view class="module-container" v-if="hotLines.length">
			<view class="module-container__bar">
				<view class="tit">爆款线路</view>
				<view class="sub"><text class="txt">精选线路推荐</text></view>
			</view>
			<view class="first-line-block" @click="toDetail(1, hotLines[0].id)">
				<image class="img" :src="hotLines[0].litpic" mode="aspectFill"></image>
				<view class="title">{{hotLines[0].title}}</view>
				<view class="price"><text class="jg">{{globalExchangeRate}}<text class="num">{{hotLines[0].price}}</text></text>起</view>
			</view>
			<swiper class="hot-line-group" :circular="false" :next-margin="'90px'" :interval="3000" :duration="300" v-if="hotLines.length > 1">
				<swiper-item v-if="index>0" v-for="(item, index) in hotLines" :key="item.id">
					<view class="hot-line-group__item" @click="toDetail(1, item.id)">
						<image class="hd" :src="item.litpic" mode="aspectFill"></image>
						<view class="bd">
							<view class="title">{{item.title}}</view>
							<view class="price"><text class="jg">{{globalExchangeRate}}<text class="num">{{item.price}}</text></text>起</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="module-more-bar">
				<text class="module-more-bar__txt" @click="toProductIndex(1)">查看线路</text>
				<text class="module-more-bar__icon iconfont">&#xe68d;</text>
			</view>
		</view>

		<!-- 热门景点 -->
		<view class="module-container" v-if="hotSpots.length">
			<view class="module-container__bar">
				<view class="tit">热门景点</view>
				<view class="sub"><text class="txt">精选景点门票推荐</text></view>
			</view>
			<view class="first-spot-block" @click="toDetail(5, hotSpots[0].id)">
				<image class="img" :src="hotSpots[0].litpic" mode="aspectFill"></image>
				<view class="title">{{hotSpots[0].title}}</view>
				<view class="price" v-if="cfg_satisfy==1">满意度：<text class="num">{{hotSpots[0].satisfyscore}}</text></view>
			</view>
			<swiper class="hot-spot-group" :indicator-dots="true" indicator-active-color="#2dbb55" indicator-color="#e5e5e5"
			 :interval="3000" :duration="300" v-if="hotSpots.length > 1">
				<swiper-item class="hot-spot-group__block">
					<view class="hot-spot-group__item" v-if="index > 0" v-for="(item, index) in hotSpots" :key="item.id" @click="toDetail(5, item.id)">
						<image class="hd" :src="item.litpic" mode="aspectFill"></image>
						<view class="bd">
							<view class="title">{{item.title}}</view>
							<view class="price" v-if="cfg_satisfy==1">满意度：{{item.satisfyscore}}</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="hot-spot-group__block" v-if="hotSpots.length > 4">
					<view class="hot-spot-group__item" v-if="index > 3" v-for="(item, index) in hotSpots" :key="item.id" @click="toDetail(5, item.id)">
						<image class="hd" :src="item.litpic" mode="aspectFill"></image>
						<view class="bd">
							<view class="title">{{item.title}}</view>
							<view class="price" v-if="cfg_satisfy==1">满意度：{{item.satisfyscore}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="module-more-bar">
				<text class="module-more-bar__txt" @click="toProductIndex(5)">更多门票</text>
				<text class="module-more-bar__icon iconfont">&#xe68d;</text>
			</view>
		</view>

		<!-- 精选游记 -->
		<view class="module-container" v-if="notes.length">
			<view class="module-container__bar">
				<view class="tit">精选游记</view>
				<view class="sub"><text class="txt">独家原创 本地体验 深度人文</text></view>
			</view>
			<swiper class="hot-note-group" :indicator-dots="true" indicator-active-color="#2dbb55" indicator-color="#e5e5e5"
			 :interval="3000" :duration="300">
				<block v-for="item in notes" :key="item.id">
					<swiper-item>
						<view class="hot-note-group__item" @click="toDetail(101, item.id)">
							<view class="pic">
								<image class="img" :src="item.litpic" mode="aspectFill"></image>
								<view class="txt">{{item.title}}</view>
							</view>
							<view class="author">
								<image class="icon" :src="item.memberpic" mode="aspectFill"></image>
								<view class="name">{{item.nickname}}</view>
							</view>
							<view class="con">{{item.description}}</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<view class="module-more-bar">
				<text class="module-more-bar__txt" @click="toProductIndex(101)">更多游记</text>
				<text class="module-more-bar__icon iconfont">&#xe68d;</text>
			</view>
		</view>

		<!-- 精选攻略 -->
		<view class="module-container" v-if="raiders.length">
			<view class="module-container__bar">
				<view class="tit">精选攻略</view>
				<view class="sub"><text class="txt">精选设计 极致体验</text></view>
			</view>
			<view class="raider-group">
				<block v-for="item in raiders" :key="item.id">
					<view class="raider-group__item" @click="toDetail(4, item.id)">
						<image class="img" :src="item.litpic" mode="aspectFill"></image>
						<view class="tit">{{item.title}}</view>
						<view class="txt">{{item.summary}}</view>
					</view>
				</block>
			</view>
			<view class="module-more-bar">
				<text class="module-more-bar__txt" @click="toProductIndex(4)">更多攻略</text>
				<text class="module-more-bar__icon iconfont">&#xe68d;</text>
			</view>
		</view>
		
		<st-footer-filing></st-footer-filing>
		<!-- 底部备案信息 -->

		<st-customize-footer></st-customize-footer>
		<!-- 自定义tabBar -->
		
		<st-screen-advertising></st-screen-advertising>
		 <!-- 营销推荐 -->	
	</view>
</template>

<script>
	import stCountdown from "@/components/st-countdown.vue"
	import stCustomizeFooter from "@/components/st-customize-footer.vue"
	import {
		adsPath,
		adsClientNo
	} from '@/utils/ads.js'
	import {
		getProDetailPage,
		getProIndexPage
	} from "@/utils/toPath.js"
	import {
		check_app_install,
		check_model_open
	} from '@/utils/utils.js'
	export default {
		components: {
			stCountdown,
			stCustomizeFooter
		},
		data() {
			return {
				uniHotSearchDefault: '',
				bannerList: [],
				menu_swiper: 296,
				navdots: false,
				isSwitch: true,
				navList: [], // 导航列表
				newMessage: [], // 实时播报
				hotSpecial: [], // 热门专题
				outdoorMenu: [], //户外属性
				currentMenu: 0,
				hotOutdoor: [], //户外列表
				hotTuan: [], // 热门团购
				destinations: [],
				hotLines: [],
				hotSpots: [],
				raiders: [], // 攻略列表
				notes: [], // 游记列表
				sHeight: 1,
				cfg_satisfy:0,
			}
		},
		created() {
			this.cfg_satisfy=uni.getStorageSync('cfg_satisfy')
			this.getBanner(); // banner
			this.getIndexNav(); // 首页导航
			this.getNewMessage(); // 实时播报
			// 获取专题
			if (this.checkAppInstall('zt')) {
				this.getHotSpecial()
			}
			// 获取户外属性
			if (this.checkAppInstall('system_outdoor') && check_model_open(114)) {
				this.getOutdoorAttr()
			}
			// 热门团购
			if (this.checkAppInstall('system_tuan') && check_model_open(13)) {
				this.getHotTuan()
			}
			// 获取线路
			if (this.checkAppInstall('system_line') && check_model_open(1)) {
				this.getHotLines()
			}
			// 获取门票
			if (this.checkAppInstall('system_spot') && check_model_open(5)) {
				this.getHotSpots()
			}
			// 获取游记
			if (this.checkAppInstall('system_notes') && check_model_open(101)) {
				this.getNotes()
			}
			// 获取攻略
			if (this.checkAppInstall('system_article')  && check_model_open(4)) {
				this.getRaiders();
			}
			// 全局热搜词
			this.uniHotSearchDefault = uni.getStorageSync('uniHotSearchDefault');
		},
		methods: {

			// 现在的时间戳--必须传入
			now() {
				return Date.now()
			},

			// 全局搜索
			jumpGlobalSearch() {
				uni.navigateTo({
					url: './search'
				})
			},

			// banner
			async getBanner() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no: client_no,
						custom_label: 'uni_index_basis_banner'
					}
				res = await this.$http(params);
				if (res.status) {
					this.bannerList = res.data;
				}
			},

			// 前往广告位的页面
			toAds(item) {
				adsPath(item.adtype, item.typeid, item.proid, item.adlink, item.adname);
			},

			// 首页导航
			async getIndexNav() {
				let res, client_no = adsClientNo(),
				params = {
					client_no: client_no,
					method: 'api/v2/index/index_nav',
				};
				res = await this.$http(params);
				if (res.status) {
					// 导航初始化
					this.isSwitch = res.data.list.length > 2 ? true : false;
					this.navdots = res.data.list.length > 8 ? true : false;
					this.menu_swiper = res.data.list.length < 5 ? this.sHeight=1 : (res.data.list.length > 8 ? this.sHeight=3 : this.sHeight=2);
					
					let index = 0;
					let newArray = [];
					while (index < res.data.list.length) {
						newArray.push(res.data.list.slice(index, index += 8));
					}
					this.navList = newArray;
				}
			},

			// 前往导航所在页面
			toNavPage(item) {
				adsPath(item.type, item.m_typeid, item.product_id, item.m_url, item.m_title,item.is_nested);
				// if (item.type == 1) {
				// 	let url = item.m_url + '?' + item.m_params
				// 	uni.navigateTo({
				// 		url: url
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/ubase/webview?path=' + item.m_url + '&adname=' + item.m_title
				// 	})
				// }
			},

			// 实时播报
			async getNewMessage() {
				let params = {
					method: 'api/v2/index/notice',
					row: 5,
					flag: 'all'
				};
				let res = await this.$http(params);
				if (res.status) {
					this.newMessage = res.data;
				}
			},

			// 获取热门专题
			async getHotSpecial() {
				let params = {
					method: 'api/v2/index/hot_zt',
					row: 3
				};
				let res = await this.$http(params);
				if (res.status) {
					this.hotSpecial = res.data.list;
				}
			},

			// 专题详情
			toSpecial(id) {
				uni.navigateTo({
					url: `../../subPackages/specials/detail?id=${id}`
				})
			},

			// 获取户外属性
			async getOutdoorAttr() {
				let params = {
					method: 'api/v2/product/get_attr_list',
					typeid: 114
				};
				let res = await this.$http(params);
				this.hotOutdoor = [];
				if (res.status) {
					this.outdoorMenu = res.data.list.splice(0, 3);
					this.outdoorMenu.map((item, index) => {
						this.hotOutdoor.push({
							id: item.id,
							attrname: item.attrname,
							list: ''
						})
					})
					this.getHotOutdoor(0, this.outdoorMenu[0].id);
				}
			},

			//获取户外列表
			async getHotOutdoor(index, id) {
				if (!this.hotOutdoor[index].list) {
					let params = {
						method: 'api/v2/outdoor/get_list',
						attrid: id,
						page: 1,
						pagesize: 6
					};
					let res = await this.$http(params);
					if (res.status) {
						this.hotOutdoor[index].list = res.data.list;
					}
				}
			},

			// 切换户外属性
			async switchAttr(e, id) {
				this.currentMenu = e.currentTarget.dataset.index;
				this.getHotOutdoor(this.currentMenu, id)
			},

			// 获取热门团购产品
			async getHotTuan() {
				let params = {
					method: 'api/v2/tuan/get_tuan_list',
					status: 1,
					pagesize: 1
				};
				let res = await this.$http(params);
				if (res.status) {
					this.hotTuan = res.data.list;
				}
			},

			// 获取热门线路产品
			async getHotLines() {
				let params = {
					method: 'api/v2/index/hot_product',
					row: 4,
					typeid: 1
				};
				let res = await this.$http(params);
				if (res.status) {
					this.hotLines = res.data;
				}
			},

			// 获取热门门票产品
			async getHotSpots() {
				let params = {
					method: 'api/v2/index/hot_product',
					row: 7,
					typeid: 5
				};
				let res = await this.$http(params);
				if (res.status) {
					this.hotSpots = res.data;
				}
			},

			// 获取热门游记
			async getNotes() {
				let params = {
					method: 'api/v2/index/hot_notes',
					row: 3
				};
				let res = await this.$http(params);
				if (res.status) {
					this.notes = res.data.list;
				}
			},

			// 获取热门攻略
			async getRaiders() {
				let params = {
					method: 'api/v2/index/hot_raiders',
					row: 3
				};
				let res = await this.$http(params);
				if (res.status) {
					this.raiders = res.data.list;
				}
			},

			// 前往产品首页
			toProductIndex(typeid) {
				let path = getProIndexPage(typeid);
				if (path) {
					uni.navigateTo({
						url: path
					})
				}
			},

			// 前往产品详情页面
			toDetail(typeid, id) {
				let path = getProDetailPage(typeid, {
					id: id
				});
				if (path) {
					uni.navigateTo({
						url: path
					})
				}
			},

			// 检查app是否安装
			checkAppInstall(appname) {
				return check_app_install(appname);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.global-header-bar {
		padding: 20rpx 24rpx;
		background-color: $uni-bg-color;

		&__select {
			color: $uni-text-color-primary;
			height: 64rpx;
			line-height: 64rpx;
			font-size: $uni-font-size-base;

			.icon {
				vertical-align: middle;
				margin: -2rpx 0 0 6rpx;
			}
		}

		&__search {
			color: $uni-text-color-grey;
			flex: 1 1 auto;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 80rpx;
			font-size: 26rpx;
			background-color: #f6f6f8;

			.icon {
				color: #c0c0c0;
				margin-right: 8rpx;
				font-size: $uni-font-size-base;
			}
		}
	}

	.banner {

		.swiper,
		image {
			height: 400rpx;
		}

		image {
			display: block;
			width: 100%;
		}
	}

	// 首页主导航 
	.menu-swiper {
		height: 296rpx;
		margin-bottom: 20rpx;
		background: #fff;
	}

	.menu-swiper.h214 {
		height: 214rpx!important;
	}
	.menu-swiper.h380 {
		height: 380rpx!important;
	}
	.menu-swiper.h416 {
		height: 416rpx!important;
	}
	
	.menu-info {
		/* #ifdef MP-WEIXIN || H5 || MP-TOUTIAO || MP-360 || MP-BAIDU || MP-QQ  */ 
		width: 702rpx!important;
		/* #endif */
		/* #ifdef MP-ALIPAY  */ 
		width: 100%!important;
		/* #endif */
			padding: 30rpx 25rpx;
		text-align: center;
	}

	.menu-info .list-url {
		float: left;
		width: 25%;
		padding: 10rpx 0;
		text-align: center;
	}

	.menu-info .item-pic {
		display: block;
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto
	}

	.menu-info .item-text {
		font-size: 24rpx;
		height: 48rpx;
		line-height: 48rpx;
	}

	.menu-swiper .uni-swiper-dots.uni-swiper-dots-horizontal {
		position: absolute;
		width: 100%;
		bottom: 15rpx;
		z-index: 999;
		text-align: center
	}

	.menu-swiper .uni-swiper-dot {
		display: inline-block;
		width: 14rpx;
		height: 14rpx;
		margin: 0 5rpx;
		position: relative
	}

	.menu-swiper .uni-swiper-dot::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 14rpx;
		height: 14rpx;
		background: #e5e5e5;
		border-radius: 14rpx;
		transform: translateX(-50%);
		vertical-align: middle
	}

	.menu-swiper .uni-swiper-dot-active::before {
		width: 29rpx;
		height: 14rpx;
		background: #2dbb55;
	}

	.uni-swiper-dots-horizontal .uni-swiper-dot:last-child {
		margin-right: 0;
		background: #54e17b !important;
		width: 30rpx !important;
		border-radius: 4px;
	}

	.menu-container {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		background-color: $uni-bg-color;

		&__item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;
			padding: 20rpx 0;
			position: relative;

			&:after {
				content: "";
				display: inline-block;
				width: 2rpx;
				height: 80rpx;
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -40rpx;
				background-color: #e5e5e5;
			}

			.icon {
				width: 100rpx;
				height: 100rpx;
			}

			.name {
				margin-left: 30rpx;
				font-size: 28rpx;
			}
		}
	}

	.scroll-message {
		display: flex;
		align-items: center;
		padding: 20rpx 24rpx;
		margin-top: -20rpx;
		margin-bottom: 20rpx;
		background-color: $uni-bg-color;

		&__hd {
			flex: 0 0 auto;

			.iconfont {
				color: transparent;
				background: linear-gradient(to bottom, #55e9b8, #39cfd7);
				-webkit-background-clip: text;
			}
		}

		&__bd {
			flex: 1 1 auto;
			height: 40rpx;
			padding-left: 20rpx;
			margin-left: 20rpx;
			border-left: 2rpx solid #e5e5e5;

			&__item {
				@include ellipse;
				color: #969696;
				height: 40rpx;
				line-height: 40rpx;
				font-size: $uni-font-size-sm;
				font-family: Arial, Helvetica, sans-serif;

				.label {
					color: $uni-text-color-primary;
					padding: 0 6rpx;
				}
			}
		}
	}

	.module-container {
		margin-bottom: 20rpx;
		background-color: $uni-bg-color;

		&__bar {
			padding: 24rpx;
			text-align: center;

			.tit {
				font-size: $uni-font-size-lg;
				font-weight: bold;
			}

			.sub {
				color: #969696;
				display: inline-block;
				position: relative;
				font-size: $uni-font-size-sm;

				&:before {
					content: "";
					display: inline-block;
					width: 26rpx;
					height: 2rpx;
					position: absolute;
					top: 50%;
					left: -36rpx;
					background-color: #969696;
				}

				&:after {
					content: "";
					display: inline-block;
					width: 26rpx;
					height: 2rpx;
					position: absolute;
					top: 50%;
					right: -36rpx;
					background-color: #969696;
				}
			}
		}
	}

	.swiper-special__group {
		height: 460rpx!important;
		// padding: 0 24rpx;

		&__item {
			padding: 0 24rpx;
			.img {
				width: 702rpx;
				height: 350rpx;
				border-radius: $uni-border-radius-lg;
			}

			.title {
				@include ellipse;
				padding-top: 12rpx;
				font-size: $uni-font-size-base;
			}
		}
	}

	.hw-tab-bar {
		display: flex;
		justify-content: center;
		padding: 24rpx 0 20rpx;

		.item {
			padding: 0 60rpx;
			position: relative;
			font-size: $uni-font-size-base;
			font-weight: bold;

			&.on {
				color: #2dbb55;
			}

			&:last-child:after {
				display: none;
			}

			&:after {
				content: "";
				display: inline-block;
				width: 2rpx;
				height: 20rpx;
				position: absolute;
				top: 50%;
				right: 0;
				margin-top: -10rpx;
				background-color: #e5e5e5;
			}
		}
	}

	.hw-con-group {
		display: flex;
		flex-wrap: wrap;
		padding: 0 14rpx;

		&__item {
			width: 33.333333%;
			padding: 10rpx;
			box-sizing: border-box;

			.hd {
				width: 220rpx;
				height: 220rpx;
				position: relative;
				overflow: hidden;
				border-radius: $uni-border-radius-lg;

				.label {
					color: #fff;
					display: inline-block;
					padding: 8rpx 24rpx 16rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
					transform: scale(.5);
					transform-origin: left top;
					border-bottom-right-radius: 24rpx;
					font-size: 40rpx;

					&.c-green {
						background-color: #2dbb55;
					}

					&.c-orange {
						background-color: #ff9f00;
					}

					&.c-red {
						background-color: #fe6651;
					}

					&.c-grey {
						background-color: #ccc;
					}
				}

				.img {
					width: 220rpx;
					height: 220rpx;
				}
			}

			.title {
				@include ellipse;
				padding: 12rpx 0 4rpx;
				font-size: 26rpx;
			}

			.info {
				display: flex;
				justify-content: space-between;

				.label {
					color: #969696;
					font-size: 22rpx;
					font-family: Arial, Helvetica, sans-serif;
				}
			}
		}
	}

	.hot-tuan-group {
		padding: 0 24rpx 24rpx;
		position: relative;

		&:after {
			@include line
		}

		.hd {
			height: 350rpx;
			position: relative;
			overflow: hidden;
			border-radius: $uni-border-radius-lg;

			.count-down {
				color: #f85357;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 100;
				padding-right: 20rpx;
				transform: scale(.5);
				transform-origin: left top;
				border-bottom-right-radius: 20rpx;
				background: #feebe6;

				.txt {
					display: inline-block;
					padding: 10rpx 12rpx;
					border-radius: 60rpx;
					font-size: 48rpx;
				}
			}

			.img {
				width: 702rpx;
				height: 350rpx;
			}
		}

		.title {
			@include ellipses;
			margin: 16rpx 0;
			font-size: $uni-font-size-base;
		}

		.info {
			@include alignItems;
			justify-content: space-between;

			.price {
				color: #999;
				flex: 0 0 auto;
				font-size: 20rpx;

				.jg {
					color: $uni-text-color-price;
					font-size: $uni-font-size-sm;

					.num {
						font-size: $uni-font-size-lg;
						font-weight: bold;
						font-family: Arial, Helvetica, sans-serif;
					}
				}
			}

			.del {
				color: #999;
				flex: 1 1 auto;
				margin-left: 20rpx;
				font-size: $uni-font-size-sm;

				.num {
					color: $uni-text-color-price;
					font-family: Arial, Helvetica, sans-serif;
				}
			}

			.btn {
				color: #fff;
				flex: 0 0 auto;
				padding: 8rpx 32rpx;
				border-radius: 60rpx;
				font-size: $uni-font-size-base;
				background: linear-gradient(to right, #ff7603, #ff4913);
			}
		}
	}

	.first-line-block {
		padding: 0 24rpx 24rpx;

		.img {
			width: 702rpx;
			height: 350rpx;
			border-radius: $uni-border-radius-lg;
		}

		.title {
			@include ellipse;
			padding: 12rpx 0;
			font-size: $uni-font-size-base;
		}

		.price {
			color: #969696;
			font-size: 20rpx;

			.jg {
				color: $uni-text-color-price;
				font-size: 24rpx;

				.num {
					font-size: $uni-font-size-lg;
					font-weight: bold;
					font-family: Arial, Helvetica, sans-serif;
				}
			}
		}
	}

	.hot-line-group {
		height: 136rpx;

		&__item {
			display: flex;
			padding: 12rpx;
			margin-left: 20rpx;
			border-radius: $uni-border-radius-base;
			background-color: #f2f2f2;

			.hd {
				flex: 0 0 auto;
				width: 112rpx;
				height: 112rpx;
				border-radius: $uni-border-radius-base;
			}

			.bd {
				flex: 1 1 auto;
				margin-left: 20rpx;

				.title {
					@include ellipses;
					font-size: $uni-font-size-sm;
				}

				.price {
					color: #969696;
					margin-top: 16rpx;
					font-size: 20rpx;

					.jg {
						color: $uni-text-color-price;
						font-size: 24rpx;

						.num {
							font-size: $uni-font-size-lg;
							font-weight: bold;
							font-family: Arial, Helvetica, sans-serif;
						}
					}
				}
			}
		}
	}

	.first-spot-block {
		padding: 0 24rpx 24rpx;

		.img {
			width: 702rpx;
			height: 350rpx;
			border-radius: $uni-border-radius-lg;
		}

		.title {
			@include ellipse;
			padding: 12rpx 0;
			font-size: $uni-font-size-base;
		}

		.price {
			color: $uni-text-color-price;
			font-size: 24rpx;

			.num {
				font-size: $uni-font-size-lg;
				font-family: Arial, Helvetica, sans-serif;
			}
		}
	}

	.hot-spot-group {
		height: 360rpx;
		padding: 0 14rpx;
		position: relative;

		&:after {
			@include line
		}

		&__block {
			display: flex;
		}

		&__item {
			width: 33.333333%;
			padding: 0 10rpx;
			box-sizing: border-box;

			.hd {
				width: 220rpx;
				height: 220rpx;
				position: relative;
				overflow: hidden;
				border-radius: $uni-border-radius-lg;
			}

			.bd {
				.title {
					@include ellipse;
					padding: 12rpx 0 4rpx;
					text-align: center;
					font-size: 26rpx;
				}

				.price {
					color: $uni-text-color-price;
					text-align: center;
					font-size: 24rpx;
				}
			}
		}
	}

	.hot-note-group {
		height: 660rpx!important;
		position: relative;

		&:after {
			@include line
		}

		&__item {
			padding: 0 24rpx;

			.pic {
				height: 350rpx;
				position: relative;

				.img {
					width: 702rpx;
					height: 350rpx;
					border-radius: $uni-border-radius-lg;
				}

				.txt {
					color: #fff;
					width: 100%;
					padding: 0 30rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					z-index: 10;
					text-align: center;
					box-sizing: border-box;
					transform: translate(-50%, -50%);
					font-size: $uni-font-size-lg;
					font-weight: bold;
				}
			}

			.author {
				margin-top: -68rpx;
				text-align: center;
				z-index:1;
				position: relative;
				.icon {
					width: 120rpx;
					height: 120rpx;
					border-radius: $uni-border-radius-circle;
					border: 6rpx solid #fff;
				}

				.name {
					font-size: $uni-font-size-base;
				}
			}

			.con {
				color: #8c8c8c;
				line-height: 40rpx;
				margin-top: 24rpx;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				font-size: $uni-font-size-sm;
			}
		}
	}

	.raider-group {
		position: relative;

		&:after {
			@include line
		}

		&__item {
			padding: 24rpx;

			&:first-child {
				padding-top: 0;
			}

			.img {
				width: 100%;
				height: 350rpx;
				border-radius: $uni-border-radius-lg;
			}

			.tit {
				@include ellipse;
				padding: 12rpx 0 0;
				font-size: $uni-font-size-base;
			}

			.txt {
				color: #969696;
				@include ellipse;
				width: 200%;
				margin-top: -24rpx;
				transform: scale(.5);
				transform-origin: left bottom;
				font-size: 44rpx;
			}
		}
	}

	.module-more-bar {
		color: $uni-text-color-primary;
		padding: 24rpx 0;
		text-align: center;

		&__txt {
			display: inline-block;
			vertical-align: middle;
			font-size: $uni-font-size-sm;
		}

		&__icon {
			vertical-align: middle;
			margin: 6rpx 0 0 8rpx;
		}
	}
</style>
